<!--显示查询方式-->
<template>
  <div class="flex flex-wrap items-center" style="float:left; margin-right:10px;">
    <el-dropdown @command="kindClick" @visible-change="mychange">
      <el-button type="primary" plain style="width:75px;">
         {{findKindDict[state.findModel[columnId].useKind].name}}
        <arrow-down-bold v-show="isUp" class="findkind-icon"/>
        <arrow-right-bold v-show="!isUp" class="findkind-icon"/>
      </el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item 
            v-for="(kindId, index) in state.findModel[columnId].findKind"
            :key="index"
            :command="kindId"
          >
            {{findKindDict[kindId].name}}
          </el-dropdown-item>
          <hr v-if="state.findModel[columnId].controlKind.length > 0">
          <!--可以切换的控件-->
          <el-dropdown-item 
            v-for="(kindId, index) in state.findModel[columnId].controlKind"
            :key="index"
            :command="kindId"
          >
          {{kindId}} &nbsp; <el-icon color="red" v-if="controlType === ditKind[kindId]"><Check /></el-icon> 
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, reactive } from 'vue'
  import { ArrowDownBold, ArrowRightBold, Check } from '@element-plus/icons-vue'
  import { getFindState } from '../state/state-find'
  import { findKindDict } from '../../map'

  const ditKind = reactive({
    '': 101,
    '日期': 120,
    '日期时间': 121,
    '年月': 122,
    '年周': 123,
    '年': 124,
    '多选': 152,
    '单选': 153,
    '下拉': 160,
    '下拉多选': 161
  })

  /**
   * 选择查询方式，每个查询字段前设置
   */
  export default defineComponent({
    name: 'nf-el-find-kind',
    components: {
      Check,
      ArrowDownBold,
      ArrowRightBold
    },
    props: {
      columnId: {
        type: [Number, String],
        default: 0
      }
    },
    setup (props, context) {
      // console.log('props-查询方式：', props)
      
      const state = getFindState()
  
      // 选择查询方式
      const kindClick = (command) => {
        if (command === command * 1) {
          // 切换查询方式
          state.findModel[props.columnId].useKind = command
        } else {
          // 切换控件类型
          const type = ditKind[command]
          state.findModel[props.columnId].useControlKind = type
          controlType.value = type

          const val = state.findModel[props.columnId].value

          switch (type) {
            case 152:
            case 161:
              if (!Array.isArray(val) && val) {
                state.findModel[props.columnId].value = [val]
              }
              break;
            default:
              if (Array.isArray(val)) {
                state.findModel[props.columnId].value = val[0]
              }
              break;
          }
        }
      }

      // 修改 图标
      const isUp = ref(false)
      const mychange = (val) => {
        isUp.value = val
      }

      const defControlType = state.itemMeta[props.columnId]?.formItemMeta?.controlType ?? 101
      const controlType = ref<number>(defControlType)

      return {
        ditKind, // 查询方式和控件的映射
        findKindDict, // 查询控件和表单控件的映射
        defControlType, // 原生的控件类型
        controlType, // 当前选择的控件类型，部分有效
        isUp, // 图标状态
        mychange, // 图标状态
        kindClick, // 选择查询方式
        state
      }
    }
  })
</script>

<style>
  .findkind-icon {
    color:#d8cec6; width: 1.0em; height: 1.0em; margin-left: 8px;margin-right: 8px;margin-top: 1px;
  }
  .example-showcase .el-dropdown + .el-dropdown {
    margin-left: 15px;
  }
  .example-showcase .el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: flex;
    align-items: center;
  }
</style>
